.backup-date-picker {
	display: flex;
	align-items: center;
	background: #fff;
	padding-top: 0.5rem;
	font-size: $font-body-small;

	@include breakpoint-deprecated( '>660px' ) {
		background: transparent;
	}

}

.backup-date-picker__select-date {
	flex-grow: 1;
	display: flex;
	justify-content: center;

	@include breakpoint-deprecated( '>660px' ) {
		justify-content: flex-start;
	}
}

.backup-date-picker__select-date--previous,
.backup-date-picker__select-date--next {
	display: flex;
	flex: 1;
	align-items: center;
	cursor: pointer;
}

.backup-date-picker__select-date--previous {
	text-align: left;

	@include breakpoint-deprecated( '>660px' ) {
		max-width: 153px;
	}
}

.backup-date-picker__select-date--next {
	text-align: right;

	@include breakpoint-deprecated( '>660px' ) {
		justify-content: space-between;
	}
}

.backup-date-picker__next-date-link {
	display: flex;
	flex: 1;
	align-items: center;

	@include breakpoint-deprecated( '>660px' ) {
		max-width: 153px;
	}
}

.backup-date-picker__search-link {
	display: flex;
}

.backup-date-picker__button--next.button.is-borderless.is-compact,
.backup-date-picker__button--previous.button.is-borderless.is-compact {
	.gridicon {
		width: 24px;
		height: 24px;
		color: var( --studio-gray-70 );
	}
}

.button.backup-date-picker__button--previous {
	margin-left: initial;
	margin-right: 8px;
}

.button.backup-date-picker__button--next {
	margin-left: 8px;
	margin-right: initial;
}

.backup-date-picker__select-date .date-range {
	flex: 1;
	text-align: center;
	max-width: 24px;
}

.button.is-primary.backup-date-picker__button--previous:focus,
.button.is-primary.backup-date-picker__button--next:focus {
	box-shadow: none;
}

.backup-date-picker .button,
.backup-date-picker .date-range {
	display: inline-block;
	float: none;
}

.backup-date-picker .button .gridicon.disabled {
	fill: #dcdcde;
}

.backup-date-picker__search-icon {
	margin-left: 0.5rem;
	cursor: pointer;
}

.backup-date-picker__display-date {
	flex: 1;
	user-select: none;
}

.backup-date-picker__display-date.disabled {
	color: var( --studio-gray-10 );
}

.filterbar__selection.button.is-borderless.is-compact .gridicon {
	width: 24px;
	height: 24px;
	color: var( --studio-gray-70 );
}

.backup-date-picker__search-icon.gridicon {
	fill: var( --studio-jetpack-green-40 );
}

/* WordPress.com-only styles */
.wordpressdotcom .backup-date-picker {
	margin-bottom: 1rem;
	padding: 0.5rem;
	background: #fff;
	box-shadow: 0 0 0 1px #dcdcde;

	&__search-icon.gridicon {
		fill: currentColor;
	}
}
